<template>
    <div>
        <el-collapse v-model="activeNames" accordion>
            <el-collapse-item :title="'序列号: ' + device.serial + ', 设备名: ' + device.name" name="1">
                <el-row>
                    <el-col :span="6">型号: {{ device.model }}</el-col>
                    <el-col :span="6">标识: {{ device.identify }}</el-col>
                    <el-col :span="6">分类: {{ device.Category.type +' '+ device.Category.name }}</el-col>
                    <el-col :span="6">部门: {{ device.Department.name }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">IP: {{ device.ip }}</el-col>
                    <el-col :span="6">MAC: {{ device.mac }}</el-col>
                </el-row>
            </el-collapse-item>
        </el-collapse>

        <el-table
            :data="tableDataFilter.slice((page-1)*pageSize, page*pageSize)"
            stripe
            border
            style="width: 100%; margin-top: 15px"
            :default-sort="{ prop: 'status', order: 'ascending' }"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-table-column label="序号" type="index" width="50">
                <template slot-scope="scope">
                    <span>{{ (page - 1) * pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="fault" label="故障现象" sortable></el-table-column>
            <el-table-column prop="detail" label="修复方法" sortable></el-table-column>
            <el-table-column prop="date" label="日期" sortable></el-table-column>
            <el-table-column prop="status" label="状态" sortable>
                <template slot-scope="scope">
                    <span>{{ scope.row.status === 1 ? '未完成' : '已完成'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类别" sortable>
                <template slot-scope="scope">
                    <span>{{ scope.row.type === 1 ? '普通维修' : '厂商更换'}}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" width="260px" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="$router.push({ name: 'repairEdit', params: { id: scope.row.id } })">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-row :gutter="20" style="padding: 10px 0">
            <el-col :span="3">
                <el-button @click="$router.push({ name: 'repairCreate', query: { device_id: id }})" type="primary">添加维修记录</el-button>
            </el-col>
            <el-col :span="1">
                <el-button @click="$router.push({ name: 'deviceList'})">返回</el-button>
            </el-col>
            <el-col :span="20">
                <el-pagination
                    background
                    style="float: right"
                    layout="prev, pager, next, sizes, total, jumper"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    :current-page="page"
                    :total="tableDataFilter.length"
                    @current-change="val => page = val"
                    @size-change="val => pageSize = val"
                ></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    props: {
        id: { required: true }
    },
    data() {
        return {
            loading: false,
            activeNames: '1',
            device: {
                serial: '',
                name: '',
                model: '',
                identify: '',
                ip: '',
                mac: '',
                Department: {},
                Category: {},
                Repairs: []
            },
            page: 1,
            pageSize: 10
        }
    },
    computed: {
        tableDataFilter() {
            return this.device.Repairs || []
        }
    },
    created() {
        this.fetch()
    },
    methods: {
        async fetch() {
            this.loading = true
            const response = await this.$http.get(`/deviceRepair/${this.id}`)
            if (response && response.code === 0) {
                this.device = response.returnObject
            }
            this.loading = false
        },
        del(row) {
            this.$confirm(`删除序列号为:${row.serial} 的 ${row.name}, 是否继续?`, '警报', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    const response = await this.$http.delete(`/device/${row.id}`)
                    if (response && response.code === 0) {
                        this.tableData.splice(this.tableData.findIndex(item => item.id === row.id), 1)
                        this.$message.success('删除成功')
                    }
                })
                .catch(() => {})
        }
    }
}
</script>

<style scoped></style>
